<template>
	<view class="container">
		<TopNav title="报备详情"></TopNav>
		<view class="radius bg-white p-12">
			<view class="">
				<text class="f-w600 f-s15 line-height22">报备详情</text>
			</view>
			<view class="flex justify-between line-height22 f-s15 f-w400 m-t16">
				<text class="text-grey self-start shrink-0">报备类型</text>
				<text class="p-l48">{{detailData.types_name}}</text>
			</view>
			<view class="flex justify-between line-height22 f-s15 f-w400 m-t16">
				<text class="text-grey self-start shrink-0">报备描述</text>
				<text class="p-l48">{{detailData.content}}</text>
			</view>
			<view class="flex justify-between line-height22 f-s15 f-w400 m-t16">
				<text class="text-grey self-start shrink-0">报备时间</text>
				<text class="p-l48">{{$u.timeFormat(detailData.create_time, 'yyyy.mm.dd hh:MM')}}</text>
			</view>
			<view class="flex justify-between line-height22 f-s15 f-w400 m-t16">
				<text class="text-grey self-start shrink-0">证明材料</text>
			</view>
			<view class="m-t10 overflow-hidden">
				<image v-for="(item,index) in detailData.images" :key="item" :src="item" class="bg-gray image-file"
					mode="" @click="handlePreviewImage(detailData.images,index)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		reportDetail
	} from '@/api/order/index.js'
	export default {
		data() {
			return {
				detailData:{},
				queryParams: {
					order: ''
				}
			};
		},
		onLoad(query) {
			this.queryParams.order = query.id
			this.getDetail()
		},
		methods: {
			handlePreviewImage(list = [], index = 0) {
				uni.previewImage({
					urls: list,
					current: index
				})
			},
			getDetail() {
				reportDetail(this.queryParams).then(res => {
					let {
						data
					} = res
					this.detailData = data[data.length - 1] || {}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 24rpx;

		.p-l48 {
			padding-left: 96rpx;
		}

		.image-file {
			width: 210rpx;
			height: 210rpx;
			margin-top: 12rpx;
			margin-right: 12rpx;
			border-radius: 12rpx;
			float: left;

			&:nth-child(n+3) {
				margin-right: 0;
			}

			&:nth-child(-n+3) {
				margin-top: 0;
			}
		}
	}
</style>